<template>
    <div class="container" :style="'min-height: '+$docHeight+'px'">
      <div v-if="!showTimeOut&&showCont">
        <div class="homeBanner">
          <img src="/img/banner.png" />
        </div>
        <div class="mainCont">
          <div class="shopMask">
            <div class="shopMain">
              <div class="shopImg">
                <img src="/img/logo.png" />
              </div>
              <div class="shopInfo">
                <div class="shopName">
                  <div class="shopNameVal">
                    <span style="color: #5cc78e;">健高儿科门诊</span>
                  </div>
                </div>
                <div class="shopInfoUnder">
                  <div class="desItem">
                    <span class="iconfont icon-dizhi"></span>
                    <span>仁寿县TCC世纪财富中心（1.3km）</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="shopDes">仁寿县罗中毅中医馆是一家以中医中药为中心
和特色的中医馆，主营业务包括：中医内妇儿科、中医针灸推拿、中医养生康复等，中医馆秉持“以专业的中医药服务大众健康”的理念，为广大群众提供预防、诊疗、康复、养生等方面的中医药思路与方法。
中医馆位于仁寿县中央商务大道512号、514号
(即翡翠海棠湾小区4栋底楼商铺），交通便捷，中医馆门口即是公交11路、17路、9路的站台，离213
国道、351国道、天府仁寿大道均不到1公里。中医
馆周边各类服务设施完善，离仁寿县人民医院仅
400米，需要各类检验、检查极其方便。中医馆为
眉山市医保定点医疗机构，目前己经开通门诊统筹报账。
中医要有效，高质量的中药饮片是基础，为了保证用药安全与疗效，中医馆以国内中药饮片生产的龙头厂家一新荷花中药饮片股份有限公司一作
为主供应商，中药饮片均由厂家直接供货，在价格合理的基础上从源头 上保证了药材的优质可靠。对于不愿或不会熬药的患者，中医馆也有国内领先的
厂家一—华润三九现代中药制药有限公司一—生产的免煎中药颗粒可供选择。
中药房(包括饮片药房、颗粒药房和加工房）
的调剂、加工人员均为中药学专业人员，调剂操作规范，药材称量准确，谙熟中药的配伍禁忌、特殊
煎服法等，从调配上保证了医生处方的正确执行。
对于因疾病需要特殊剂型的患者，中医馆除了常规的中药汤剂服务之外，也能提供专业的膏剂、散剂等的加工服务。</div>
            <van-notice-bar
              class="notice"
              left-icon="volume-o"
              color="#5cc78e"
              background="#fff"
              :text="shop_notice"
            />
          </div>
          <div class="mainList">
            <div class="mainTitle">
                名医推荐
            </div>
            <div class="userList">
                <div @click="goDetail(item)" :class="index==0?'noTop userItem':'userItem'" :key="index" v-for="(item,index) in userArr">
                    <div class="userImg">
                        <img :src="item.userImg" />
                    </div>
                    <div class="userInfo">
                        <div class="userHead">
                            <div class="userName">{{ item.userName }}</div>
                            <div class="orderTag">今日有号</div>
                        </div>
                        <div class="userTagDes">
                            <div class="userdesItem">{{ item.doctName }}</div>
                            <div class="userdesItem">{{ item.doctName2 }}</div>
                        </div>
                        <div class="userDes">
                            擅长：{{ item.userDes }}
                        </div>
                        <div class="userUnder">
                            <div class="orderPrice">挂号费：<span class="redText">¥{{ item.pricr }}元</span></div>
                            <div class="orderBtn">预约挂号</div>
                        </div>
                    </div>
                </div>
            </div>
          </div>
        </div>
        
      </div>
      <footcpm></footcpm>
      <getLoad v-if="!showCont"></getLoad>
      <getTimeOut v-if="showTimeOut"></getTimeOut>
    </div>
  </template>
  
  <script>
  import footcpm from '@/components/footcpm.vue'
  import {userapi,coupon,receiveCoupon,goods} from "@/http/api";  
  import getLoad from '@/components/public/load.vue'
    import getTimeOut from '@/components/public/getTimeOut.vue'
  
    export default {
      components: {getLoad,getTimeOut,footcpm},
      data() {
        return {
          showTimeOut:false,
          showCont:false,
          homeData:{},
          userArr:[
            {userImg:"https://localbird.oss-cn-chengdu.aliyuncs.com/uploads/images/20240612/2340ccc675c30b290a9edf9a7f3de26eb39b7785.png",userName:'倪鑫博士',orderStatus:true,doctName:'主治医生',doctName2:'耳鼻喉科',userDes:'耳鼻咽喉专业常见病及多发病的诊断及手术治疗以及耳鼻喉危急重症患者抢救，是耳鼻咽喉专业业务骨干。',pricr:'13.00',id:0,userDes2:'男，主治医师，科室耳鼻咽喉专业医疗组长。毕业于川北医学院眼耳鼻喉专业，从事耳鼻咽喉工作10+年，曾在川北医学院附属医院及华西医院进修学习，擅长耳鼻咽喉常见病及多发病的诊断及手术治疗，是耳鼻咽喉专业业务骨干。'},
            {userImg:"https://localbird.oss-cn-chengdu.aliyuncs.com/uploads/images/20240612/6f902d3507d7e762e2c92e3b220486628ffdd48e.png",userName:'刘建文',orderStatus:true,doctName:'副主任医师',doctName2:'骨科',userDes:'创伤、脊柱、关节等疾病的诊疗。',pricr:'15.00',id:1,userDes2:'女，高年资主治医师。本科毕业于成都中医药大学，从事中西医临床工作10余年。曾随四川省中医院多位名师学习，如四川省首届名中医、著名中医儿科专家胡天成教授；中医妇科朱鸿秋教授；肾病科詹华奎教授等。对中医儿科、中医妇科、消化内科、呼吸内科等常见病都有较丰富的临床经验。'},
            {userImg:"https://localbird.oss-cn-chengdu.aliyuncs.com/uploads/images/20240612/92281657c7df8f7d324835836bb30ce377155870.png",userName:'吴艺橙',orderStatus:true,doctName:'主治医生',doctName2:'儿童保健科',userDes:'儿科常见病、多发病、儿童保健及生长发育性疾病的诊治。',pricr:'10.00',id:2,userDes2:'男，主治医师，儿科主任；硕士研究生在读，师从四川大学杨凡教授；眉山市医学会新生儿专委会委员；眉山市医学会儿童肾脏及免疫专委会委员；近3年发表学术论文1篇，，儿童医学科普5篇。',},
            {userImg:"https://localbird.oss-cn-chengdu.aliyuncs.com/uploads/images/20240612/dd7b9883b5fac8f37d1d13f7faf272135cdc05f1.png",userName:'罗诗伊',orderStatus:true,doctName:'副主任医师',doctName2:'中医科',userDes:'脾胃病如慢性胃炎、消化性溃疡、慢性肠炎、胃肠神经官能症、慢性便秘等。肺系病如慢支炎、慢阻肺、肺功能受损、慢性咳嗷、慢性咽炎等。心脑病如眩晕、慢性头痛、高血压病、动脉硬化等。肝病如脂肪肝、肝功能异常等。肾病如慢性水肿、慢性腰痛、长期蛋白尿等。肿瘤病如肺癌、胃癌等。情志病如慢性失眠、焦虑状态等。妇科病如卵巢早衰、多囊卵巢综合征、月经失调、乳腺增生等。',pricr:'18.00',id:3,userDes2:'女，副主任中医师，医学硕士。本科毕业于泸州医学院，研究生毕业于成都中医药大学。2005年8月至2022年3月在仁寿县人民医院工作，任中医科主任。其专业主攻方向为中西医结合内科，旁及中医妇科、中医儿科等，从医多年，曾先后获得县级、市级科学进步二等奖。现为眉山市名中医，眉山市“十佳医生”，仁寿县名医。'},
          ],
          shop_notice:'温馨提示：XX医生周一至周五下午下班时间调整为17：00，敬请知悉。'
        }
      },
      props: {},
      methods:{
        goDetail(item){
          this.$router.push({path:'/detail',query:{id:item.id}})
        },
        getData(){
          userapi().then((res)=>{
            if(res.data.code==1){
              this.homeData = res.data.data
            }else{
              this.showToast = true
              this.showText = res.data.msg
            }
            this.showCont = true
          }).catch(()=>{
              this.showCont = true
              this.showTimeOut = true
            })
        },
      },
      mounted(){
      },
      created() {
        this.showCont = true
        // this.getData()
      },
    }
  </script>
  
  <style scoped lang="less">
  .container {
    padding-bottom: 3rem;
    box-sizing: border-box;
    background-color: #ebf9f3;
    .homeBanner{
      width: 100%;
      font-size: 0;
      margin: 0 auto;
      overflow: hidden;
      position: relative;
      .buyBanner{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
      }
      img{
        width: 100%;
      }
    }
    .mainCont{
      width: 100%;
    //   top: -2rem;
      position: relative;
      // background-color: #fff;
      border-radius: 0.25rem;
      overflow: hidden;
      padding: 0 4%;
      margin-top: 0.75rem;
      box-sizing: border-box;
      .shopMask{
        box-sizing: border-box;
        border-radius: 0.25rem;
        width: 100%;
        padding: 0.75rem 4%;
        background-color: #fff;
        .shopMain{
          display: flex;
          .shopImg{
          width: 3rem;
          height: 3rem;
          font-size: 0;
          border: 0.15rem solid #5cc78e;
          border-radius: 50%;
          overflow: hidden;
          margin-right: 0.75rem;
          img{
            width: 100%;
          }
        }
        .shopInfo{
          width: 1rem;
          flex: 1;
          height: 3.3rem;
          box-sizing: border-box;
          display: flex;
          padding-top: 0.15rem;
          flex-direction: column;
          justify-content: space-around;
          .shopName{
            font-size: 0.8rem;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .shopNameVal{
              flex: 1;
              width: 1rem;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              margin-right: 0.75rem;
            }
          }
          .shopInfoUnder{
            color: #666;
            font-size: 0.6rem;
            .desItem{
              margin-top: 0.25rem;
              display: flex;
              align-items: center;
              .iconfont{
                margin-right: 0.25rem;
              }
            }
          }
        }
        }
        .shopDes{
          width: 100%;
          font-size: 0.6rem;
          color: #666;
          box-sizing: border-box;
          margin-top: 0.75rem;
          margin-bottom: 0.75rem;
            //css 文字超出行数用三点表示
            word-break: break-all;
            overflow:hidden; 
            text-overflow:ellipsis; 
            display:-webkit-box;
            -webkit-box-orient:vertical;  
            -webkit-line-clamp:3; /* 超出几行省略 */
        }
      }
      .mainList{
        width: 100%;
        margin-top: 0.75rem;
        margin-bottom: 1.25rem;
        background-color: #fff;
        padding: 0.75rem 4%;
        box-sizing: border-box;
        border-radius: 0.25rem;
        .mainTitle{
            font-weight: bold;
            font-size: 0.8rem;
        }
        .userList{
            width: 100%;
            .userItem{
                width: 100%;
                display: flex;
                padding: 1rem 0;
                border-top: 1px dashed #ccc;
                .userImg{
                    width: 5rem;
                    height: 5rem;
                    border-radius: 0.25rem;
                    img{
                        width: 100%;
                        border-radius: 0.25rem;
                    }
                }
                .userInfo{
                    flex: 1;
                    width: 1rem;
                    margin-left: 0.75rem;
                    .userHead{
                        height: 1rem;
                        display: flex;
                        align-items: center;
                        .userName{
                            font-weight: bold;
                            font-size: 0.8rem;
                        }
                        .orderTag{
                            padding: 0.15rem 0.5rem;
                            border-radius: 0.15rem;
                            background-color: #ebf9f3;
                            color: #5cc78e;
                            font-size: 0.6rem;
                            margin-left: 0.75rem;
                        }
                    }
                    .userTagDes{
                        display: flex;
                        align-items: center;
                        font-size: 0.6rem;
                        margin: 0.25rem 0;
                        .userdesItem{
                            margin-right: 0.75rem;
                            color: #666;
                        }
                    }
                    .userDes{
                        width: 100%;
                        word-break: break-all;
                        overflow:hidden; 
                        text-overflow:ellipsis; 
                        display:-webkit-box;
                        font-size: 0.6rem;
                        color: #666;
                        -webkit-box-orient:vertical;  
                        -webkit-line-clamp:2; /* 超出几行省略 */
                    }
                    .userUnder{
                        display: flex;
                        justify-content: space-between;
                        font-size: 0.6rem;
                        margin-top: 0.25rem;
                        align-items: center;
                        .orderPrice{
                            color: #666;
                            .redText{
                                color: #ee5020;
                            }
                        }
                        .orderBtn{
                            padding: 0.35rem 0.75rem;
                            background-image: linear-gradient(to right, #8ee3be,#5cc78e);
                            // background-color: #5cc78e;
                            color: #fff;
                            border-radius: 0.25rem;
                        }
                    }
                }
            }
            .noTop{
                border-top: none;
            }
        }
      }
    }
  }
  </style>
  <style >
  .van-notice-bar{
    padding: 0;
    box-sizing: border-box;
  }
  </style>
  